<template>
    <div class="event-real">
        <ModalTitle title="事件实时" />
        <!-- 趋势图 -->
        <div class="echarts" ref="echarts"></div>
    </div>
</template>

<script>
// 事件实时
import ModalTitle from '@components/ModalTitle/Index.vue'
import { ZongHeZhiFaDB } from '@/api/zhangzi'
export default {
    components: { ModalTitle },
    data() {
        return {
            timer: null
        }
    },
    mounted() {
        if (this.timer && this.timer != null) {
            clearInterval(this.timer)
        }
        this.filterData()
        this.timer = setInterval(() => {
            this.filterData('change')
        }, 30000)
    },
    methods: {
        // 获取事件实时图数据
        getEventData() {
            return new Promise(async (resolve, reject) => {
                const res = await ZongHeZhiFaDB.eventRealAPI()
                if (res.success) {
                    resolve(res)
                } else {
                    this.$message.error(res.message)
                    reject()
                }
            })
        },
        async filterData(type = 'init') {
            const res = await this.getEventData()
            let x = res.data.time.map(e => e.time)
            let oneData = JSON.parse(JSON.stringify(res.data.time))
            let twoData = JSON.parse(JSON.stringify(res.data.time))
            let threeData = JSON.parse(JSON.stringify(res.data.time))
            oneData.forEach(item => {
                res.data.reporting.forEach(e => {
                    if (e.time == item.time) {
                        item.count = e.count
                    }
                })
            });
            twoData.forEach(item => {
                res.data.filing.forEach(e => {
                    if (e.time == item.time) {
                        item.count = e.count
                    }
                })
            });
            threeData.forEach(item => {
                res.data.complete.forEach(e => {
                    if (e.time == item.time) {
                        item.count = e.count
                    }
                })
            });
            oneData = oneData.map(k => k.count ? k.count : 0)
            twoData = twoData.map(k => k.count ? k.count : 0)
            threeData = threeData.map(k => k.count ? k.count : 0)
            // init  初始化第一次需要创建echarts实例
            if (type == 'init') {
                this.initEchart(x, oneData, twoData, threeData)
            } else {
                // 定时器触发 只需要修改echarts属性数据
                var chart = echarts.getInstanceByDom(this.$refs.echarts)
                var option = chart.getOption()
                option.xAxis[0].data = x
                option.series[0].data = oneData
                option.series[1].data = twoData
                option.series[2].data = threeData
                chart.setOption(option)
            }
        },
        // 初始化实例对象
        initEchart(x, one, two, three) {
            let colorList = ['#FDA550', '#00FACD', '#00ADF7']
            let xData = x;  //x数据
            let legendData = ['上报', '立案']; //图例
            let firstIndustry = one; //上报
            let twoIndustry = two; //立案
            let thirdIndustry = three; //结案
            let dom = this.$refs.echarts
            let charts = echarts.init(dom)
            let options = {
                color: colorList,
                backgroundColor: "",
                grid: {
                    top: '15%',
                    left: '0',
                    right: '0',
                    bottom: '0',
                    containLabel: true,
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                legend: {
                    orient: 'horizontal',
                    right: '0',
                    top: 'top',
                    data: legendData,
                    itemGap: 20,
                    //图例文字样式
                    textStyle: {
                        color: '#fff',
                        fontSize: "1.2rem"
                    }
                },
                xAxis: [
                    {
                        type: 'category',
                        axisTick: {
                            show: false,
                        },
                        interval: 1,
                        axisLabel: {
                            color: 'rgba(36, 173, 254, 1)',
                            fontSize: "1.4rem"
                        },
                        axisLine: {
                            show: true
                        },
                        data: xData,
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '',
                        interval: 20,
                        axisLabel: {
                            formatter: '{value} '
                        },
                        axisLabel: {
                            textStyle: {
                                //坐标轴颜色
                                color: 'rgba(36, 173, 254, 1)',
                                fontSize: "1rem"
                            }
                        },
                        axisLine: {
                            //y轴线的颜色以及宽度
                            show: false,
                        },
                        //坐标轴线样式
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: 'dashed', //solid实线;dashed虚线
                                opacity: 0.2,
                            }
                        },
                    },
                ],
                series: [
                    {
                        name: "上报",
                        data: firstIndustry,
                        type: 'line',
                        smooth: true, //true曲线; false折线
                        symbol: 'none',
                        itemStyle: {
                            normal: {
                                lineStyle: {
                                    color: colorList[0], //改变折线颜色
                                    type: 'solid'
                                }
                            }
                        },
                        areaStyle: {
                            //折线图颜色半透明
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: 'RGBA(219, 153, 52, 1)' // 0% 处的颜色
                                }, {
                                    offset: 1, color: 'RGBA(219, 153, 52, 0.1)' // 100% 处的颜色
                                }],
                                global: false // 缺省为 false
                            }
                        }
                    },
                    {
                        name: "立案",
                        data: twoIndustry,
                        type: 'line',
                        smooth: true, //true曲线; false折线
                        symbol: 'none',
                        itemStyle: {
                            normal: {
                                lineStyle: {
                                    color: colorList[1], //改变折线颜色
                                    type: 'solid'
                                }
                            }
                        },
                        areaStyle: {
                            //折线图颜色半透明
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: 'RGBA(1, 209, 161, 1)' // 0% 处的颜色
                                }, {
                                    offset: 1, color: 'RGBA(1, 209, 161, 0.1)' // 100% 处的颜色
                                }],
                                global: false // 缺省为 false
                            }
                        }
                    },
                ]
            }
            options && charts.setOption(options)
        }
    },
    beforeDestroy() {
        clearInterval(this.timer)
    }
}
</script>

<style lang="less" scoped>
.event-real {
    width: 100%;
    height: 34.2rem;
    margin-bottom: 1.6rem;

    .echarts {
        margin-top: 1.5rem;
        width: 100%;
        height: calc(100% - 3.8rem - 1.5rem - 0.5rem);
    }
}
</style>